<template>
  <el-form-item :class="attributes?.customClassName?.formItemClassName ?? ''" v-bind="attributes.formItem">
    <template v-for="item in attributes?.formItem?.slotScope ?? []" :key="item.slotName" v-slot:[item.slotName]="scope">
      <component :is="item.render(scope)" />
    </template>

    <!-- 时间选择器组件 -->
    <div class="datepicker">
      <div class="img3" @click="handleLeftChnage">
        <img src="@/assets/images/home/home-icon-03.png" alt="">
      </div>
      <div style="width: 180px;float: left">
        <el-date-picker :editable="false" :clearable="false" v-model="selectValue" :class="attributes?.customClassName?.elModelClassName ?? ''" v-bind="attributes.elModel" format="YYYY-MM"  :prefix-icon="customPrefix"/>
      </div>
      <div class="img2" @click="handleRightChnage">
        <img src="@/assets/images/home/home-icon-02.png" alt="">
      </div>
    </div>
    <!-- 时间组件图片 -->



  </el-form-item>
</template>
<script setup>
import head01 from '@/assets/images/home/home-icon-01.png'
import { computed, onMounted,h,shallowRef } from 'vue'
import moment from 'moment'

const props = defineProps({
  value: {
    type: [String, Number, Boolean, Date, Array],
    required: true
  },
  attributes: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['push-val'])
// 自定义图标
const customPrefix = shallowRef({
  render() {
    return h('img', {
      src: head01,
      style:{
        marginTop:"1px",
        width: "14px",
        height: "14px",
      }
    })
  },
})
console.log(props.value)
const selectValue = computed({
  get() {
    return props.value || moment().format(' YYYY-MM')
  },
  set(val) {
    emit('push-val', val)
  }
})
const  handleLeftChnage=()=>{
    selectValue.value = moment(selectValue.value).subtract(1, 'months').format('YYYY-MM');
}
const  handleRightChnage=()=>{
    selectValue.value = moment(selectValue.value).add(1, 'months').format('YYYY-MM');
}
</script>
<style lang="scss" scoped>
.datepicker{
    box-sizing: border-box;
    height: 40px;
    padding: 0 5px;
    position: relative;
    width: 260px;
    line-height: 40px;
    border-radius: 20px;
    border:1.5px  solid #000;
    :deep(.el-input__wrapper) {
      height: 34px !important;
      line-height: 34px !important;
      flex-shrink: 0;
      box-shadow: none;
      border:none;
      margin-top: -3px;
      padding: 0;
      width: 180px;
      background: none !important;
    }
    :deep(.el-date-editor){
      width: 180px;
    }

    :deep(.el-input-focus-border:focus) {
      border: none;
      box-shadow: none;

    }

    :deep(.el-input__prefix-inner) {
        margin-right: 18%;
        margin-top: 8px;
        position: absolute;
        right: 0px;
    }

    .img3 {
      width: 34px;
      line-height: 37px;
      float: left;
      img {
        margin-top: 11.5px;
        width: 14px;
        height: 14px;
      }
    }

    .img2 {
      float: right;
      width: 33px;
      height: auto;
      overflow: hidden;
      text-align: right;
      line-height: 37px;
      img {
        margin-top: 11.5px;
        width: 14.4px;
        height: 14.4px;

      }
    }


    :deep(.el-input__inner) {
      height: 34px;
      text-indent: -28px;
      line-height: 34px;
      text-align: center;
      font-size: 16px;
      color: #000;
    }


    :deep(.is-focus) {
      border: none ;
      box-shadow: none !important;
    }
    :deep(.el-input__wrapper:hover) {
      border: none;
      box-shadow: none;
    }
    :deep(.el-input__suffix){
      position: absolute;
      right: 10px;
      margin-top: 0px;
    }
}
</style>